<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>一块表</title>
  <style>
    .clock{
      position: relative;
      margin: 40px auto 0;
      width: 400px;
      height: 400px;
      border: 1px solid #ddd;
      border-radius: 50%;
      background: mistyrose;
      transform: rotate(180deg);
    }
    .p{
      position: absolute;
      top: 50%;
      left: 50%;
      transform-origin: top center;
      vertical-align: bottom;
      border-radius: 16px;
    }
    .hour{
      width: 16px;
      margin-left: -8px;
      height: 80px;
      background: rebeccapurple;
      transform: rotate(0deg);
    }
    .minute{
      width: 8px;
      margin-left: -4px;
      height: 120px;
      background: cornflowerblue;
      transform: rotate(0deg);
    }
    .second{
      width: 4px;
      margin-left: -2px;
      height: 180px;
      background: #ff0000;
      transform: rotate(0deg);
    }
    time{
      display: block;
      font-family: Consolas;
      margin: 15px auto;
      text-align: center;
      font-size: 45px;
    }
    .timebox{
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="clock">
    <div class="p second"></div>
    <div class="p minute"></div>
    <div class="p hour"></div>
  </div>
  <div class="timebox">
    <time>16:28:05</time>
    <button>启动时钟</button>
    <button>暂停时钟</button>
  </div>
<script>
  /**
   * 转盘时钟
   */
  function drawClock(){
    var now = new Date();
    var h = now.getHours() % 12;
    var m = now.getMinutes();
    var s = now.getSeconds();
    var hpointer = document.getElementsByClassName('hour')[0];
      hpointer.style.transform = 'rotate('+(h*30)+'deg)';
    var mpointer = document.getElementsByClassName('minute')[0];
      mpointer.style.transform = 'rotate('+(m*6)+'deg)';
    var spointer = document.getElementsByClassName('second')[0];
      spointer.style.transform = 'rotate('+(s*6)+'deg)';
    setTimeout(drawClock,1000);
  }
  drawClock();

  var loc = true;
  setInterval(function () {
    loc = !loc;
    if(loc){
      document.title = '❤❤❤';
    }else{
      document.title = '★★★';
    }
  },200);
</script>
</body>
</html>